<template>
    <div class="search-box">

        <div class="search-header-part">
            <div class="search-input-box">
                <el-row :gutter="10">
                    <el-col :span="9">
                        <div class="logo">
                            sob | 搜索
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <el-input size="small" v-model="keyword" placeholder=""
                                  @keyup.enter.native="doSearch"></el-input>
                    </el-col>
                    <el-col :span="9">
                        <el-button size="small" type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
                    </el-col>
                </el-row>
            </div>

            <div class="search-condition-box">
                <div class="select-item">
                    <span :class="this.query.sort === ''? 'sort-active': ''" @click="doSearchBySort('')">综合排序</span>
                    <span :class="this.query.sort === '2' || this.query.sort === '1'? 'sort-active': ''"
                          @click="doSearchBySort('2')">时间排序</span>
                    <span :class="this.query.sort === '3' || this.query.sort === '4'? 'sort-active': ''"
                          @click="doSearchBySort('4')">浏览量</span>
                </div>
                <div class="select-item">
                    <span :class="this.query.categoryId === '' ?  'category-active' : ''"
                          @click="doSearchByCategory('')">全部分类</span>
                    <span v-for="(item, index) in categories"
                          :key="index"
                          :class="query.categoryId === item.id ?  'category-active' : ''"
                          @click="doSearchByCategory(item.id)">
                    {{ item.name }}
                </span>
                </div>
            </div>
        </div>


        <div class=" search-result-box">
            <el-row :gutter="20">
                <el-col :span="18">
                    <div class="search-left-part">
                        <div class="search-result-count-info">
                            找到 <span v-text="this.pageNavigation.totalElements"></span> 条结果
                        </div>

                        <div class="search-result-list-box">
                            <div class="search-result-item"
                                 v-for="(blog, index) in searchResult"
                                 :key="index">

                                <NuxtLink :to="'/article/' + (blog.id)">
                                    <span class="result-item-title"
                                         v-html="blog.blogTitle">
                                    </span>
                                </NuxtLink>


                                <div class="result-item-content" v-html="blog.blogContent">
                                </div>

                                <div class="search-info-box">
                                    <span v-text="formatDate(blog.blogCreateTime)" class="el-icon-time">
                                    </span>
                                    <span v-text="blog.blogViewCount" class="el-icon-view"></span>
                                    <el-tag :key="labelIndex"
                                            type="danger"
                                            size="mini"
                                            class="search-result-label"
                                            v-for="(label, labelIndex) in blog.blogLabels">
                                        <a :href="'/search?keyword=' + label" target="_blank">{{ label }}</a>
                                    </el-tag>
                                </div>
                            </div>

                            <div class="search-result-empty-box" v-show="this.searchResult.length===0">
                                <div class="empty-box">
                                    <span class="empty-text">
                                        没有找到相关的内容
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="search-page-pagination">
                            <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="pageNavigation.currentPage"
                                :page-sizes="[5]"
                                :page-size="pageNavigation.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="pageNavigation.totalElements">
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="search-right-part">
                        <div class="word-cloud-box">
                            <div class="word-cloud-title">热门标签</div>
                            <div class="word-cloud-content">
                                <div class="labels-list-box">
                                    <LRWordCloud/>
                                </div>
                            </div>
                        </div>

                        <div class="taobao-ad-box">
                            <div class="word-cloud-title">广告</div>
                            <div class="word-cloud-content">
                                <TaobaoLoop/>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import {searchArticleByKeyWord} from "assets/api/search-portal-api";
import {success_code} from "assets/utils/LRConstant";
import {formatDate} from "assets/utils/date";
import {getCategories} from "assets/api/article-portal-api";
import LRWordCloud from "@/components/LRWordCloud";
import TaobaoLoop from "@/components/TaobaoLoop";

export default {
    name: "index",
    components: {TaobaoLoop, LRWordCloud},
    data() {
        return {
            query: {
                categoryId: '',
                keyword: '',
                page: 1,
                size: 1,
                sort: '',
            },
            pageNavigation: {
                currentPage: 1,
                totalPages: 1,
                pageSize: 5,
                totalElements: 10
            },
            searchResult: [],
            categories: [],
            keyword: '',
        }
    },
    asyncData({query}) {

        query.categoryId = query.categoryId ? query.categoryId : '';
        query.sort = query.sort ? query.sort : '';
        query.size = query.size ? query.size : 5;
        query.page = query.page ? query.page : 1;

        return {
            query: query
        }
    },
    methods: {
        initVariable() {
            this.pageNavigation.currentPage = this.query.page;
            this.pageNavigation.pageSize = this.query.size;
        },
        initData: function () {
            searchArticleByKeyWord(this.query.keyword,
                this.pageNavigation.currentPage,
                this.pageNavigation.pageSize,
                this.query.categoryId,
                this.query.sort).then((result) => {
                // check data
                if (result.code === success_code) {
                    // complete return data
                    let contents = result.data.content;
                    contents.forEach((item) => {
                        item.blogLabels = item.blogLabels.split("-");
                    });
                    this.searchResult = contents;

                    this.pageNavigation.totalElements = result.data.totalElements;
                    this.pageNavigation.totalPages = result.data.totalPages;
                    this.pageNavigation.currentPage = result.data.currentPage;
                    this.pageNavigation.pageSize = result.data.pageSize;
                    // change ui
                    // 回到顶部方便阅读
                    let bolgHeader = document.getElementsByClassName("blog-header");
                    if (bolgHeader[0] != null) {
                        bolgHeader[0].scrollIntoView({
                            block: 'start',
                            behavior: "smooth"
                        });
                    }

                } else {
                    this.$message.error("更具分类id获取文章失败: message" + result.message);
                }
            });

            getCategories().then((result) => {
                if (result.code === success_code) {
                    this.categories = result.data;
                } else {
                    this.$message.error("获取分类失败");
                }
            })
        },
        formatDate(date) {
            return formatDate(new Date(date), "yyyy-MM-dd hh:mm");
        },
        handleSizeChange(val) {
            this.pageNavigation.pageSize = val;
            this.initData();
        },
        handleCurrentChange(val) {
            this.pageNavigation.currentPage = val;
            this.initData();
        },
        doSearch() {
            this.keyword = this.keyword.trim();
            if (this.keyword === '') {
                return;
            } else {
                // complete submit data
                this.query.keyword = this.keyword;
            }

            this.pageNavigation.currentPage = 1;

            // submit data
            this.initData();
        },
        doSearchBySort(_sort) {
            switch (_sort) {
                case '2':
                    this.query.sort = this.query.sort === '2' ? '1' : '2';
                    break;
                case '4':
                    this.query.sort = this.query.sort === '4' ? '3' : '4';
                    break;
                default:
                    this.query.sort = '';
                    break;
            }

            // check data
            this.keyword = this.keyword.trim();

            if (this.keyword === '') {
                if (this.query.keyword === '') {
                    return;
                }
            } else {
                // complete submit data
                this.query.keyword = this.keyword;
            }

            this.pageNavigation.currentPage = 1;

            // submit data
            this.initData();
        },
        doSearchByCategory(_categoryId) {
            this.query.categoryId = _categoryId;

            // check data
            this.keyword = this.keyword.trim();

            if (this.keyword === '') {
                if (this.query.keyword === '') {
                    return;
                }
            } else {
                // complete submit data
                this.query.keyword = this.keyword;
            }

            this.pageNavigation.currentPage = 1;

            // submit data
            this.initData();
        }
    },
    mounted() {
        this.initVariable();
        this.initData();
    }
}
</script>

<style scoped>
.search-input-box .logo {
    text-align: right;
    color: deepskyblue;
}


.search-logo .logo {
    font-size: 30px;
}

.search-left-part {
    background-color: white;
}

.search-right-part text {
    cursor: pointer;
}

.search-right-part {
}

.search-result-box {
    margin-top: 20px;
    border-radius: 5px;
}

.search-result-count-info {
    color: #70757a;
    line-height: 20px;
    padding-left: 20px;
    padding-top: 20px;
    font-size: 18px;
}

.search-result-list-box {
    padding: 20px;
}

.result-item-title:hover {
    color: blue;
}

.result-item-title {
    cursor: pointer;
    color: black;
    font-size: 24px;
    text-decoration: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    line-height: 26px;
    height: 26px;
}

.search-result-item {
    margin-bottom: 20px;
}

.result-item-content {
    margin-top: 5px;
    margin-bottom: 5px;
    color: #4d5156;
    font-size: 14px;
    text-decoration: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 20px;
    height: 40px;
}

.search-info-box {
    color: #999;
    font-size: 14px;
}

.search-result-label:hover {
    background-color: pink;
}

.search-result-label {
    cursor: pointer;
    margin-left: 5px;
}

.search-page-pagination {
    padding: 20px;
}

.select-item span:hover {
    color: dodgerblue;
}

.select-item span {
    color: grey;
    margin-left: 10px;
    margin-right: 8px;
    padding: 5px 15px;
    font-size: 12px;
    cursor: pointer;
}

.select-item {
    margin-top: 10px;
    line-height: 24px;
}

.category-active, .sort-active {
    background: dodgerblue;
    color: white !important;
    border-radius: 4px;
}

.search-header-part {
    margin-top: 20px;
    background: white;
    padding: 20px;
    border-radius: 4px;
}

.search-condition-box {
    border-top: solid 1px grey;
    margin-top: 30px;
}

.search-result-empty-box {
    text-align: center;
}

.empty-text {
    font-size: 20px;
    line-height: 40px;
}

.word-cloud-title {
    font-weight: 600;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid grey;
}

.word-cloud-box {
    background-color: white;
    padding: 10px;
}

.taobao-ad-box {
    margin-top: 20px;
    background-color: white;
    padding: 20px;
}
</style>